<template>
  <div class="empty-info-container">
    <div class="head">
      <div>本次面试过程中未收集有效记录，无法生成面试分析结果</div>
    </div>

    <div class="content">
      <p>
        可能存在的原因：<br />
        1. 面试过程中，麦克风未开启或距离过远 <br />
        2. 面试持续时长过短
      </p>
      <img src="/src/icons/svg/interviewBot/empty.svg" />
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
.empty-info-container {
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  padding-bottom: 14px;

  .head {
    background: linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
    padding: 23px 14px;
    font-weight: 500;
  }
  .content {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 400;
    font-size: 12px;
    color: #595959;
    line-height: 22px;
    margin: 0 14px;

    img {
      width: 100px;
      height: 100px;
      margin-right: 24px;
      margin-left: 24px;
    }
  }
}
</style>
